2021-05-20
En responsiv webbplats är lättare och billigare att upprätthålla än två separata webbplatser [10]. För att ändra webbplatsens utseende ändrar man bara i CSS-filen/filerna [10]. När webbplatsen bara har en URL förbättras sökmotoroptimeringen och man får en tydligare bild av hur sidan används i och med att all data slås samman, oavsett vilken enhet man använder [10]. Även delning av sociala uppdateringar (Facebook etc.) underlättas [10]. Det behövs inga användaragenter för att identifiera användarens webbläsare och enhet [10]. En nackdel är att det kan vara svårt att integrera reklam på webbplatsen [10]. Dessutom kan webbplatsen bli något större då man behöver ladda ner extra CSS och JavaScript [10]. Det kan vara svårt att undvika att bilder med hög upplösning visas på webbplatsens mobilversion [10].
För att få webbplatsen att ladda snabbare på mobiler bör man minimera http-anrop, bildstorlekar och användningen av JavaScript [10]. Exempel på åtgärder för att minimera http-anrop är att ladda bilder baserat på media queries, att ersätta bilder med CSS-tekniker där det går och att använda image sprites, dvs. att man kombinerar flera bilder i en enda bild [10]. Man bör även undvika att ha flera olika externa stilmallar om det går [10]. Genom att först koda för mobiler (”mobile first”) kan man undvika onödiga http-anrop i och med att man använder media queries för surfplattor, datorer etc. när man vill ladda ner bilder etc för dessa [10]. Minimering av bildstorlekar uppnås genom att man endast laddar ner bilder som är lämpade för användarens enhet, med fördel bilder med låg upplösning [10]. Detta kan uppnås med hjälp av media queries innehållande olika brytpunkter för maxbredd och device-pixel-ratio [10].
Viewport är den synliga delen av webbsidan i webbläsarfönstret [11]. När en webbsida ska visas på en enhet med liten skärm, försöker enheten att ”krympa ihop” sidan så att allt innehåll kan ses på en gång [11]. Detta beteende kan man stänga av med följande kod: meta name=”viewport” content=”width=device-width”, initial-scale=1” [11]. På så vis kan man anpassa sidan till enheter med mindre skärmar med hjälp av media queries [11].